<template>
	<d2-container>
		<template slot="header">
			<el-form class="header-area" ref="indexForm" :model="indexForm" label-width="80px" style="height: auto">
				<el-row>
					<el-col :span="5">
						<el-form-item label="订单号" prop="orderNo"><el-input v-model="indexForm.orderNo" placeholder="请输入订单号" clearable></el-input></el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="订单渠道" prop="channelType">
							<el-select v-model="indexForm.channelType" placeholder="请选择" style="width: 100%;">
								<el-option value="0" label="请选择">请选择</el-option>
								<el-option value="1" label="门店收银订单">门店订单</el-option>
								<el-option value="2" label="美团订单">美团订单</el-option>
								<el-option value="3" label="抖音订单">抖音订单</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="是否支付" prop="isPay">
							<el-select v-model="indexForm.isPay" placeholder="请选择" style="width: 100%;">
								<el-option value="-1" label="请选择">请选择</el-option>
								<el-option value="0" label="未支付">未支付</el-option>
								<el-option value="2" label="已支付">已支付</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="支付方式" prop="payType">
							<el-select v-model="indexForm.payType" placeholder="请选择" style="width: 100%;">
								<el-option value="0" label="请选择">请选择</el-option>
								<el-option value="1" label="账户支付">账户支付</el-option>
								<el-option value="2" label="现金支付">现金支付</el-option>
								<el-option value="3" label="通联支付">通联支付</el-option>
								<el-option value="4" label="支付宝记账">支付宝记账</el-option>
								<el-option value="5" label="微信记账">微信记账</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10">
						<el-form-item label="下单时间" prop="time">
							<el-date-picker
								v-model="indexForm.time"
								type="datetimerange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="timestamp"
								:default-time="['00:00:00', '23:59:59']"
								clearable
								style="width: 100%"
								@change="chooseTime"
							></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="10">
						<el-form-item label="支付时间" prop="time">
							<el-date-picker
								v-model="indexForm.time2"
								type="datetimerange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="timestamp"
								:default-time="['00:00:00', '23:59:59']"
								clearable
								style="width: 100%"
								@change="chooseTime2"
							></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<div class="search-submit">
							<el-button type="primary" size="medium" loading v-if="loading">查询</el-button>
							<el-button type="primary" size="medium" @click="submitForm" v-else>查询</el-button>

							<el-button type="primary" plain size="medium" @click="resetForm('indexForm')">重置</el-button>

							<el-button type="warning" size="medium" @click="exportForm('indexForm')">导出</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</template>

		<template>
			<el-table stripe border :data="tableData" style="width: 100%">
				<el-table-column type="index" align="center" width="50"></el-table-column>

				<el-table-column label="订单编号" prop="orderNo" width="140"></el-table-column>
				<el-table-column label="订单渠道" prop="channelType" align="center" width="80">
					<template slot-scope="scope">
						<!-- 渠道类型：1门店收银订单，2美团订单，3抖音订单 -->
						<template v-if="scope.row.channelType == 1">
							门店订单
						</template>
						<template v-if="scope.row.channelType == 2">
							美团订单
						</template>
						<template v-if="scope.row.channelType == 3">
							抖音订单
						</template>
					</template>
				</el-table-column>
				<el-table-column label="门店" prop="shopName" align="center" width="80"></el-table-column>

				<el-table-column label="下单时间" prop="createTime" align="center" :formatter="forDate" width="100"></el-table-column>

				<el-table-column label="支付时间" prop="payTime" align="center" :formatter="forDate" width="100"></el-table-column>

				<el-table-column label="订单状态" align="center" width="100">
					<template slot-scope="scope">
						<template v-if="scope.row.orderStatus == 1">
							待付款
						</template>
						<template v-else-if="scope.row.orderStatus == 2">
							已付款
						</template>
						<template v-else-if="scope.row.orderStatus == 3">
							已取消
						</template>
						<template v-else>-</template>
					</template>
				</el-table-column>

				<el-table-column label="支付方式" prop="payType" align="center" width="100">
					<template slot-scope="scope">
						<!-- payType 1.账户支付 2.现金支付 3.通联支付 -->
						<!-- payTypeSub 1.账户支付 2.现金支付 3.支付宝支付 4.微信支付 5银联支付 -->
						<template v-if="scope.row.payType == 1">
							账户支付
						</template>
						<template v-else-if="scope.row.payType == 2">
							现金支付
						</template>
						<template v-else-if="scope.row.payType == 3">
							通联支付
							<br />
							<template v-if="scope.row.payTypeSub == 3">
								-支付宝
							</template>
							<template v-if="scope.row.payTypeSub == 4">
								-微信
							</template>
							<template v-if="scope.row.payTypeSub == 5">
								-银联
							</template>
						</template>
						<template v-else-if="scope.row.payType == 4">
							支付宝记账
						</template>
						<template v-else-if="scope.row.payType == 5">
							微信记账
						</template>
						<template v-else>
							-
						</template>
					</template>
				</el-table-column>

				<el-table-column label="餐品金额" prop="orderAmount" align="center" width="90">
					<template slot-scope="scope">
						{{ scope.row.orderAmount | moneyFilter }}
					</template>
				</el-table-column>
				<el-table-column label="赠餐金额" prop="giftAmount" align="center" width="90">
					<template slot-scope="scope">
						<template v-if="scope.row.giftAmount">
							-{{ scope.row.giftAmount | moneyFilter }}
						</template>
						<template v-else>
							-
						</template>
					</template>
				</el-table-column>
				<el-table-column label="返现金额" prop="cashBackAmount" align="center" width="90">
					<template slot-scope="scope">
						{{ scope.row.cashBackAmount | moneyFilter }}
					</template>
				</el-table-column>

				<el-table-column label="应收金额" prop="payableAmount" align="center" width="90">
					<template slot-scope="scope">
						{{ scope.row.payableAmount | moneyFilter }}
					</template>
				</el-table-column>
				<el-table-column label="套餐已付" prop="reduceAmount" align="center" width="90">
					<template slot-scope="scope">
						<template v-if="scope.row.thirdPaidAmount">
							-{{ scope.row.thirdPaidAmount | moneyFilter }}
						</template>
						<template v-else>
							-
						</template>
					</template>
				</el-table-column>
				<el-table-column label="减免金额" prop="reduceAmount" align="center" width="90">
					<template slot-scope="scope">
						<template v-if="scope.row.reduceAmount">
							-{{ scope.row.reduceAmount | moneyFilter }}
						</template>
						<template v-else>
							-
						</template>
					</template>
				</el-table-column>
				<el-table-column label="实收金额" prop="payAmount" align="center" width="90">
					<template slot-scope="scope">
						{{ scope.row.payAmount | moneyFilter }}
					</template>
				</el-table-column>
				<el-table-column label="找零金额" prop="changeAmount" align="center" width="90">
					<template slot-scope="scope">
						<template v-if="scope.row.changeAmount">
							-{{ scope.row.changeAmount | moneyFilter }}
						</template>
						<template v-else>
							-
						</template>
					</template>
				</el-table-column>

				<el-table-column label="退款金额" prop="" align="center" width="90">
					<template slot-scope="scope">
						<template v-if="scope.row.refundAmount">
							{{ scope.row.refundAmount | moneyFilter }}
						</template>
						<template v-else>
							-
						</template>
					</template>
				</el-table-column>
				<el-table-column label="实际补差金额" prop="" align="center" width="90">
					<template slot-scope="scope">
						<template v-if="scope.row.diffAmountPay">
							{{ scope.row.diffAmountPay | moneyFilter }}
						</template>
						<template v-else>
							-
						</template>
					</template>
				</el-table-column>

				<el-table-column label="退款状态" align="center" width="100">
					<template slot-scope="scope">
						<template v-if="scope.row.afterSalesStatus">
							{{
								scope.row.afterSalesStatus == 1
									? '部分退款中'
									: scope.row.afterSalesStatus == 2
									? '全部退款中'
									: scope.row.afterSalesStatus == 3
									? '已部分退款'
									: scope.row.afterSalesStatus == 4
									? '已全部退款'
									: scope.row.afterSalesStatus == 5
									? '取消退款'
									: '无售后'
							}}
						</template>
						<template v-else>-</template>
					</template>
				</el-table-column>

				<!-- <el-table-column label="收银员" align="center" width="80">
					<template slot-scope="scope">
						{{ scope.row.cashierName }}
					</template>
				</el-table-column> -->

				<el-table-column label="操作" align="center" fixed="right" width="110">
					<template slot-scope="scope">
						<el-button type="primary" plain size="small" @click="viewDetails(scope.row.orderId)">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>

		<template slot="footer">
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				></el-pagination>
			</div>
		</template>
	</d2-container>
</template>

<script>
import dayjs from 'dayjs'
import { findOrderListByPage, exportOrderList } from '@api/restaurant/merchant/order'
export default {
  data () {
    return {
      indexForm: {
        orderNo: '',
        channelType: '0',
        payType: '0',
		isPay: '-1',
        time: [],
        time2: []
      },
	  createTimeStart: '',
	  createTimeEnd: '',
	  payTimeStart: '',
	  payTimeEnd: '',

      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,

      loading: false
    }
  },
  filters: {
	  moneyFilter (value) {
		  if (value == '' || value == null || value == undefined) {
		  	return '0.00'
		  } else if (value == 0) {
		  	return '0.00'
		  } else {
		  	let newVal = parseFloat(value)
		  	if (newVal < 0) {
		  		value = (-1 * parseFloat((value + '').replace(/[^\d\.-]/g, ''))).toFixed(2) + ''
		  	} else {
		  		value = parseFloat((value + '').replace(/[^\d\.-]/g, '')).toFixed(2) + ''
		  	}

		  	let left = value.split('.')[0].split('').reverse()
		  	let right = value.split('.')[1]

		  	let t = ''
		  	for (let i = 0; i < left.length; i++) {
		  		t += left[i] + ((i + 1) % 3 === 0 && (i + 1) !== left.length ? ',' : '')
		  	}

		  	if (newVal < 0) {
		  		return '-' + t.split('').reverse().join('') + '.' + right
		  	} else {
		  		return t.split('').reverse().join('') + '.' + right
		  	}
		  }
	  }
  },
  methods: {
    fetchData () {
      findOrderListByPage({
        channelType: this.indexForm.channelType === '0' ? '' : this.indexForm.channelType,
        payType: this.indexForm.payType === '0' ? '' : this.indexForm.payType,
        isPay: this.indexForm.isPay === '-1' ? '' : this.indexForm.isPay,
		orderNo: this.indexForm.orderNo,
        createTimeStart: this.createTimeStart,
        createTimeEnd: this.createTimeEnd,
        payTimeStart: this.payTimeStart,
        payTimeEnd: this.payTimeEnd,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      })
	  .then(res => {
		  this.tableData = res.data.content
		  this.total = res.data.total
		  this.loading = false
	  })
    },

    forDate (row, column) {
	  var formatTime = ''
	  if (column.property == 'createTime') {
	    formatTime = row.createTime == null ? '' : dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')
	  }
	  if (column.property == 'payTime') {
	    formatTime = row.payTime == null ? '' : dayjs(row.payTime).format('YYYY-MM-DD HH:mm:ss')
	  }
	  return formatTime
    },

    resetPage () {
	  this.currentPage = 1
	  this.pageSize = 10
	  this.total = 0

	  this.fetchData()
    },
    handleSizeChange (val) {
	  this.pageSize = val
	  this.fetchData()
    },
    handleCurrentChange (val) {
	  this.currentPage = val
	  this.fetchData()
    },

    chooseTime (val) {
      this.createTimeStart = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss')
      this.createTimeEnd = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss')
    },
    chooseTime2 (val) {
	  this.payTimeStart = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss')
	  this.payTimeEnd = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss')
    },

    submitForm (formName) {
      if (this.loading) {
		  return
      }
      this.loading = true
      this.resetPage()
    },
    resetForm (formName) {
	  this.$refs[formName].resetFields()
	  this.createTimeStart = ''
	  this.createTimeEnd = ''
	  this.payTimeStart = ''
	  this.payTimeEnd = ''
	  this.resetPage()
    },

    viewDetails (id) {
      this.$router.push('/restaurant/tempReport/shopOrderDetail?id=' + id)
    },

    exportForm () {
      exportOrderList({
        channelType: this.indexForm.channelType === '0' ? '' : this.indexForm.channelType,
        payType: this.indexForm.payType === '0' ? '' : this.indexForm.payType,
		isPay: this.indexForm.isPay === '-1' ? '' : this.indexForm.isPay,
        orderNo: this.indexForm.orderNo,
        createTimeStart: this.createTimeStart,
        createTimeEnd: this.createTimeEnd,
        payTimeStart: this.payTimeStart,
        payTimeEnd: this.payTimeEnd
      }).then(res => {
        var blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
        var filename = res.headers.filename
        var downloadElement = document.createElement('a')
        var href = window.URL.createObjectURL(blob) // 创建下载的链接
        downloadElement.style.display = 'none'
        downloadElement.href = href
        downloadElement.download = filename // 下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() // 点击下载
        document.body.removeChild(downloadElement) // 下载完成移除元素
        window.URL.revokeObjectURL(href) // 释放掉blob对象
      }).catch(err => {
        console.log('err', err)
      })
    }
  },
  mounted () {
    this.fetchData()
  }
}
</script>

<style lang="scss" scoped></style>
